<template>
  <div class="bx--grid bx--grid--full-width bx--grid--no-gutter test-page">
    <div class="bx--row">
      <div class="bx--col-lg-16">    
            <h1>TestPage2 -  {{paramData.id}}</h1>
      </div>
    </div>    
    <cv-form>
      <div class="bx--row">
        <div class="bx--col-lg-12">
          <span style="color:red">{{errMsg}}</span>
        </div>
        <div class="bx--col-lg-4" style="display: flex; justify-content: flex-end"> 
          <cv-button type="button" kind="primary" :small="true" @click="doFormat('format')">Format</cv-button>&nbsp;
          <cv-button type="button" kind="primary" :small="true" @click="doFormat('compress')">Compress</cv-button>
        </div>
      </div>
      <div class="bx--row">
        <div class="bx--col-lg-16">      
            <ace-editor v-model="content" @init="editorInit" lang="json" theme="chrome" width="100%" height="30rem"></ace-editor>          
        </div>
      </div>
    </cv-form>
    <cv-loading :active="loading" :overlay="true"></cv-loading>
  </div>
</template>

<script>
const jsonObj={"login":"IBM","id":1459110,"node_id":"MDEyOk9yZ2FuaXphdGlvbjE0NTkxMTA=","url":"https://api.github.com/orgs/IBM","repos_url":"https://api.github.com/orgs/IBM/repos","events_url":"https://api.github.com/orgs/IBM/events","hooks_url":"https://api.github.com/orgs/IBM/hooks","issues_url":"https://api.github.com/orgs/IBM/issues","members_url":"https://api.github.com/orgs/IBM/members{/member}","public_members_url":"https://api.github.com/orgs/IBM/public_members{/member}","avatar_url":"https://avatars0.githubusercontent.com/u/1459110?v=4","description":"","name":"International Business Machines","company":null,"blog":"https://www.ibm.com/opensource/","location":"Armonk, New York, U.S.","email":null,"twitter_username":null,"is_verified":false,"has_organization_projects":true,"has_repository_projects":true,"public_repos":1794,"public_gists":0,"followers":0,"following":0,"html_url":"https://github.com/IBM","created_at":"2012-02-21T22:13:01Z","updated_at":"2020-10-19T14:28:02Z","type":"Organization"};
export default {
  name: 'TestPage2',
  components: {
    "ace-editor": require("vue2-ace-editor"),
  },
  data() {
    return {
      loading:false,
      errMsg:"",
      content:JSON.stringify(jsonObj)
    };
  },
  methods: {
    editorInit() {
      require("brace/ext/language_tools"); 
      require("brace/mode/html");
      require("brace/mode/json");
      require("brace/mode/java");
      require("brace/mode/javascript");
      require("brace/mode/python");
      // require("brace/theme/tomorrow_night_blue");
      require("brace/theme/chrome");
      require("brace/snippets/javascript");
      require("brace/snippets/json");
      require("brace/snippets/java");
      require("brace/snippets/python");
    },     
    doFormat(action){
      try{
        this.errMsg="";
        let jsonData=JSON.parse(this.content);
        if(action==="format"){
          this.content=JSON.stringify(jsonData,null,4);
        }else{
          this.content=JSON.stringify(jsonData,null,0);
        }
      }catch(err){
        this.errMsg=err;
      }
      
    }  
  },  
  computed: {
    paramData(){
      let data={};
      data.id=this.$route.params["id"];
      return data;
    }     
  },
  mounted(){
  } 
};
</script>

<style lang="scss" scoped>
@import '../../styles/carbon-utils';
/deep/ .bx--modal-footer .cv-button{
  justify-content: center;
  align-items: center;
  width:100%;
}
</style>